<!-- 使用页面滚动示例(vue) -->
<template>
	<view class="page">
		<cu-custom id="nav" :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
			<block slot="backText">
				<view class="text-white ">
					测试页
				</view>
			</block>
		</cu-custom>
		<view style="background-color: #424242;">
			<view v-for="(item,index) in list" :key="index" :id="'wrp_'+index">
				<view v-if="item.length > 0">
					<view v-for="(item1,index1) in item" :key="index1">
						
						<view class="itemCardui shadow padding-sm" >
							<view class="flex justify-start">
								<image
									:src="$isHttp(item1.picture)"
									lazy-load style="width: 120rpx;height: 170rpx;border-radius: 10rpx;"
									mode="aspectFill">
								</image>
								<view class=" margin-left-sm" style="width: 520rpx;">
									<view class="flex justify-start margin-top-xs">
										<view class="text-bold text-black">{{item1.name}}</view>
									</view>
									<view class="margin-top-sm">
										<view v-for="(item11,index11) in ['硬核','古风','现代','本格','5人']" :key="index11"
											class="cu-tag sm round" style="background-color: #797979;color: #ffffff;"
											v-if="index11<6">{{item11}}</view>
									</view>
									<view class="margin-top-sm flex justify-start" style="color: #4a494c;">
										<view class="flex justify-start align-center">
											<text class="cuIcon-friendfill text-yellow"></text>
											<view class="text-sm margin-left-xs">7人</view>
										</view>
										<view class="flex justify-start align-center margin-left-sm">
											<text class="cuIcon-timefill text-yellow"></text>
											<view class="text-sm margin-left-xs">4小时</view>
										</view>
										<view class="flex justify-start align-center margin-left-sm">
											<text class="cuIcon-selectionfill text-yellow"></text>
											<view class="text-sm margin-left-xs">硬核</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<view v-else :style="{'height': item.height+'px'}"></view>
			</view>
		</view>
		<!-- <view v-for="(item,index) in list" :key="index" :id="'wrp_'+index">
			<view v-if="item.length > 0">
				<view class="wrp" v-for="(item1,index1) in item" :key="index1">
					当前是第{{ item1.idx }}个元素，为第 {{ index }} 屏数据
				</view>
			</view>
			<view v-else :style="{'height': item.height+'px'}">
			</view>
		</view> -->
	</view>
</template>

<script>
	const throttle = (fn, delay) => {
		var startTime = new Date();
		return function() {
			var context = this;
			var args = arguments;
			var endTime = new Date();
			var resTime = endTime - startTime;
			//判断大于等于我们给的时间采取执行函数;
			if (resTime >= delay) {
				fn.apply(context, args);
				//执行完函数之后重置初始时间，等于最后一次触发的时间
				startTime = endTime;
			}
		}
	}
	export default {
		data() {
			return {
				list: [],

				wholePageIndex: 0,
				wholeVideoList: [],
				currentRenderIndex: 0,
				index: 0,
				pageHeightArr: [],
			};
		},
		async onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let {
						windowHeight
					} = res;
					this.windowHeight = windowHeight;
				}
			})

			let res = await this.$u.api.getScriptList({
				page: this.wholePageIndex + 1,
				number: 10,
				select: 1,
				array: ''
			})
			let arr = res.data

			this.wholeVideoList[this.wholePageIndex] = arr;
			this.$set(this.list, this.wholePageIndex, arr)
			// this.list.push(arr)
			console.log(this.list)
			this.$nextTick(() => {
				this.setHeight()
			})
		},
		methods: {
			setHeight() {
				const that = this;
				const wholePageIndex = this.wholePageIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(`#wrp_${wholePageIndex}`).boundingClientRect()
				query.exec(function(res) {
					that.pageHeightArr[wholePageIndex] = res[0] && res[0].height;
				})
			},
			async getVideoInfoData() {

				this.wholePageIndex = this.wholePageIndex + 1;

				const wholePageIndex = this.wholePageIndex;
				this.currentRenderIndex = wholePageIndex;

				let res = await this.$u.api.getScriptList({
					page: this.wholePageIndex + 1,
					number: 10,
					select: 1,
					array: ''
				})
				let arr = res.data
				this.wholeVideoList[wholePageIndex] = arr;
				let datas = {};
				let tempList = new Array(wholePageIndex + 1).fill(0);
				if (wholePageIndex > 2) {
					tempList.forEach((item, index) => {
						if (index < tempList.length - 2) {
							tempList[index] = {
								height: this.pageHeightArr[index]
							};
						} else {
							tempList[index] = this.wholeVideoList[index];
						}
					})
					this.list = tempList
				} else {
					this.$set(this.list, wholePageIndex, arr)
				}
				this.$nextTick(() => {
					this.setHeight()
				})
			},
		},
		onPageScroll: throttle(function(e) {
			const realScrollTop = e.scrollTop;
			const that = this;
			// 滚动的时候需要实时去计算当然应该在哪一屏幕
			let tempScrollTop = 0;
			const wholePageIndex = this.wholePageIndex;

			for (var i = 0; i < this.pageHeightArr.length; i++) {
				tempScrollTop = tempScrollTop + this.pageHeightArr[i];
				if (tempScrollTop > realScrollTop + this.windowHeight) {
					console.log('set this.computedCurrentIndex' + i);
					this.computedCurrentIndex = i;
					break;
				}
			}
			const currentRenderIndex = this.currentRenderIndex;
			if (this.computedCurrentIndex !== currentRenderIndex) {
				// 这里给不渲染的元素占位
				let tempList = new Array(wholePageIndex + 1).fill(0);
				tempList.forEach((item, index) => {
					if (this.computedCurrentIndex - 1 <= index && index <= this.computedCurrentIndex + 1) {
						tempList[index] = that.wholeVideoList[index];
					} else {
						tempList[index] = {
							height: that.pageHeightArr[index]
						};
					}
				})

				this.currentRenderIndex = this.computedCurrentIndex;
				// 渲染第一屏的时候，如果之前这里有看到这里，并且showVideoIcon，那么需要重新绑定一次。

				this.list = tempList
			}
		}, 500),
		onReachBottom() {
			this.getVideoInfoData();
		},
	};
</script>

<style lang="scss" scoped>
	.wrp {
		width: 375px;
		height: 100px;
	}


	.itemCardui {
		width: 690rpx;
		margin: 12rpx auto;
		border-radius: 12rpx;
		background-color: #ffffff;
		position: relative;
	}
</style>
